<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../css/fontawesome-free-5.7.2-web/css/all.css">
    <link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css">
    <link rel="stylesheet" href="../css/jquery.mobile.ui.css">
    <link rel="stylesheet" href="../css/jqm-ui-demos.css">
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/jquery.mobile-1.4.5.js"></script>
    <script type="text/javascript" src="../js/jquery.mobile.ui.js"></script>
</head>
<body>

<div data-role="page" data-theme="a">
    <div data-role="header" data-position="fixed" data-tap-toggle="false" class="navbar">
        <div class="nav">
            <a data-ajax="false" href="../menus.html" class="nav-link"><i class="fas fa-chevron-left"></i> 首页</a>
            <h3 class="nav-title">Check</h3>
        </div>
    </div>
    <div role="main" class="ui-content">


        <div class="demo">
            <h5>一个简单的列表实现</h5>
            <ul data-role="listview">
                <li>
                    <div class="item-content">
                        <div class="item-inner">
                            <p class="item-title">Title</p>
                        </div>
                        <div class="item-after">
                            <small class="badge badge-rounded badge-danger">10</small>
                        </div>
                    </div>
                </li>
            </ul>
        </div>

        <div class="demo">
            <h5>稍丰富一点的列表</h5>
            <ul data-role="listview">
                <li>
                    <div class="item-content">
                        <div class="item-inner">
                            <div class="item-title">
                                <div>我曾</div>
                                <p>我曾把完整的镜子打碎</p>
                                <p>深夜的枕边全是眼泪</p>
                            </div>
                        </div>
                        <div class="item-after">
                            <i class="far fa-thumbs-up grey"></i>
                        </div>
                    </div>
                </li>
            </ul>
        </div>

        <div class="demo">
            <h5>媒体列表</h5>
            <ul data-role="listview">
                <li>
                    <a href="##">
                        <div class="item-content">
                            <div class="item-media">
                                <img src="../images/media1.jpg" width="80"/>
                            </div>
                            <div class="item-inner">
                                <div class="item-title">
                                    <div>我曾</div>
                                    <p>我曾把完整的镜子打碎</p>
                                    <p>深夜的枕边全是眼泪</p>
                                </div>
                            </div>
                            <div class="item-after">
                                <i class="far fa-thumbs-up grey"></i>
                            </div>
                        </div>
                    </a>

                </li>
                <li>
                    <a href="##">
                        <div class="item-content">
                            <div class="item-media">
                                <img src="../images/media1.jpg" width="80"/>
                            </div>
                            <div class="item-inner">
                                <div class="item-title">
                                    <div>我曾</div>
                                    <p>我曾把完整的镜子打碎</p>
                                    <p>深夜的枕边全是眼泪</p>
                                </div>
                            </div>
                            <div class="item-after">
                                <i class="far fa-thumbs-up grey"></i>
                            </div>
                        </div>
                    </a>

                </li>
                <li>
                    <a href="##">
                        <div class="item-content">
                            <div class="item-media">
                                <img src="../images/media1.jpg" width="80"/>
                            </div>
                            <div class="item-inner">
                                <div class="item-title">
                                    <div>我曾</div>
                                    <p>我曾把完整的镜子打碎</p>
                                    <p>深夜的枕边全是眼泪</p>
                                </div>
                            </div>
                            <div class="item-after">
                                <i class="far fa-thumbs-up grey"></i>
                            </div>
                        </div>
                    </a>

                </li>
            </ul>
        </div>

    </div>
</div>
</body>
</html>